
import DynamicForm from "../../../components/DynamicForm"

import React from 'react';
// import DynamicForm from './DynamicForm';

const MyFormPage = () => {
  // 表单字段配置
  const formFields = [
    {
      key: 'name',
      label: '姓名',
      type: 'input',
      required: true,
      placeholder: '请输入姓名',
      span: 6,
    },
    {
      key: 'age',
      label: '年龄',
      type: 'number',
      min: 0,
      max: 150,
      span: 6,
    },
    {
      key: 'gender',
      label: '性别',
      type: 'radio',
      options: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' },
      ],
      span: 6,
    },
    {
      key: 'birth',
      label: '出生日期',
      type: 'date',
      span: 6,
    },
    {
      key: 'hobby',
      label: '爱好',
      type: 'select',
      options: [
        { label: '读书', value: 'book' },
        { label: '运动', value: 'sport' },
        { label: '音乐', value: 'music' },
      ],
      span: 12,
    },
    {
      key: 'introduction',
      label: '个人简介',
      type: 'textarea',
      rows: 4,
      span: 24,
    },
  ];

  // 表单提交处理
  const handleFinish = (values) => {
    console.log('表单提交成功：', values);
  };

  // 表单提交失败处理
  const handleFinishFailed = (errorInfo) => {
    console.log('表单验证失败：', errorInfo);
  };

  return (
  
      <DynamicForm
        fields={formFields}
        initialValues={{ name: '张三', age: 25 }}
        maxVisible={4} // 超过3个字段则折叠
        onFinish={handleFinish}
        onFinishFailed={handleFinishFailed}
        onReset={() => console.log('表单已重置')}
        onChange={(info) => console.log('字段变化：', info)}
      />

  );
};

export default MyFormPage;